<template>
  <div>
    <el-dialog :visible.sync="visible" :close-on-click-modal="false" width="60%" class="dialogText header-none" center @closed="cancel">
      <div v-loading="loading">
        <el-form ref="form" :model="form" label-width="100px">
          <el-row>
            <mainTilte title="出运单基本信息" />
          </el-row>
          <billForm :form-data="info" />
          <div v-if="form.products.length > 0">
            <el-row>
              <mainTilte title="清单明细信息" />
            </el-row>
            <el-table :data="form.products" stripe fit border>
              <el-table-column type="selection" width="55" />
              <el-table-column prop="purchase_order_code" label="采购单号" width="180" align="center" />
              <el-table-column prop="contract_code" label="合同号" width="180" align="center" />
              <el-table-column prop="goods_code" label="系统sku" width="180" align="center" />
              <el-table-column prop="virtual_warehouse" label="入库仓库" width="180" align="center" />
              <el-table-column label="输入分仓数量" prop="number" min-width="200" align="center">
                <template slot-scope="scope">
                  <el-form-item :prop="'products.' + scope.$index + '.number'" class="no-label mt22" :rules="numberRule">
                    <el-input-number v-model="scope.row.number" placeholder="请输入分仓数量" :precision="0" :min="1" :max="scope.row.transform_number" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="goods_name" label="中文名称" width="180" align="center" />
              <el-table-column prop="goods_name_en" label="英文名称" width="180" align="center" />
              <el-table-column prop="container_rate" label="箱率" width="180" align="center" />
            </el-table>
          </div>
          <div v-if="form.parts.length > 0">
            <el-row>
              <mainTilte title="转运配件明细信息" />
            </el-row>
            <el-table :data="form.parts" stripe fit border>
              <el-table-column type="selection" width="55" />
              <el-table-column prop="purchase_order_code" label="采购单号" width="180" align="center" />
              <el-table-column prop="contract_code" label="合同号" width="180" align="center" />
              <el-table-column prop="goods_code" label="系统sku" width="180" align="center" />
              <el-table-column prop="virtual_warehouse" label="入库仓库" width="180" align="center" />
              <el-table-column label="输入分仓数量" prop="number" min-width="200" align="center">
                <template slot-scope="scope">
                  <el-form-item :prop="'parts.' + scope.$index + '.number'" class="no-label mt22" :rules="numberRule">
                    <el-input-number v-model="scope.row.number" placeholder="请输入分仓数量" :precision="0" :min="1" :max="scope.row.transform_number" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="goods_name" label="中文名称" width="180" align="center" />
              <el-table-column prop="container_rate" label="箱率" width="180" align="center" />
            </el-table>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="btnLoading" type="primary" @click="submit">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import billForm from './billForm'
export default {
  components: { billForm },
  data() {
    return {
      visible: false,
      info: {}, // 详情
      loading: false,
      // 表单
      form: {
        trans_order_id: '',
        products: [], // 商品
        parts: [] // 配件
      },
      numberRule: [
        {
          required: true,
          message: '请输入分仓数量',
          trigger: 'blur'
        }
      ],
      loadingText: '正在加载中',
      btnLoading: false
    }
  },
  methods: {
    // 显示
    show(id) {
      const vm = this
      vm.visible = true
      vm.loading = true
      vm.$http
        .get(`/transhipment-order/sub-order/detail/${id}`)
        .then((res) => {
          vm.info = res.data
          vm.form.trans_order_id = vm.info.id
          vm.form.products = vm.info.products.map(e => {
            e['transform_number'] = e.number
            return e
          })
          vm.form.parts = vm.info.parts.map(e => {
            e['transform_number'] = e.number
            return e
          })
          vm.loading = false
        })
        .catch(() => {
          vm.loading = false
        })
    },
    // 提交数据
    submit() {
      const vm = this
      vm.$refs.form.validate(valid => {
        if (valid) {
          vm.btnLoading = true
          const { trans_order_id, products, parts } = vm.form
          const params = {
            trans_order_id: trans_order_id,
            sub_order: []
          }
          params.sub_order = products.concat(parts).map(e => {
            const { sub_order_id, number } = e
            return { sub_order_id, number }
          })
          vm.$http.post('/transhipment-order/confirm-suborders', params).then(res => {
            vm.$message.success('预分仓确认成功')
            vm.$emit('submit')
            vm.cancel()
            vm.btnLoading = false
          }).catch(() => {
            vm.btnLoading = false
          })
        }
      })
    },
    // 取消
    cancel() {
      const vm = this
      vm.info = {}
      vm.form.trans_order_id = ''
      vm.form.products = []
      vm.form.parts = []
      vm.visible = false
    }
  }
}
</script>

<style scoped>
/deep/ .el-autocomplete {
  width: 100%;
}
</style>
